<template>
  <div class="page">
    <nav-bar title="城市运行监测" theme="white">
      <template #custom>
        <img
          src="../../../assets/images/cockpit/home/status-bar-search.png"
          class="iconimg"
          alt=""
          @click="handleScreen"
        />
      </template>
    </nav-bar>
    <van-tabs :swipe-threshold="4" sticky :offset-top="44">
      <van-tab title="人口统计" name="0">
        <div style="margin-top: 44px"></div>
        <div class="real-population">
          <div class="real-population-left"></div>
          <div class="real-population-center">
            <p>实有人口数</p>
          </div>
          <div class="real-population-right">
            <p>
              <span class="real-population-right-num">{{ personData.personTotal }}</span>
              人
            </p>
          </div>
        </div>
        <div class="population-total">
          <div class="population-total-chart">
            <div class="population-total-chart-top">
              <p>
                <span class="population-total-chart-top-left">常驻人口</span>
                <span class="population-total-chart-top-right">流动人口</span>
              </p>
            </div>
            <div class="population-total-chart-center">
              <div class="population-total-chart-center-item1" :style="'width:' + boxWidth1"></div>
              <div class="population-total-chart-center-item2" :style="'width:' + boxWidth2"></div>
            </div>
            <div class="population-total-chart-bottom">
              <span class="population-total-chart-bottom-left">
                {{ personData.localPersonTotal + '(' + boxNum1 + ')' }}
              </span>
              <span class="population-total-chart-bottom-right">
                {{ personData.migrantPersonTotal + '(' + boxNum2 + ')' }}
              </span>
            </div>
          </div>
        </div>
        <div class="interlayer"></div>
        <div class="key-population">
          <div class="key-population-left"></div>
          <div class="key-population-center">
            <p>重点人口数</p>
          </div>
          <div class="key-population-right">
            <p>
              <span class="key-population-right-num">{{ keyPersonData.total }}</span>
              人
            </p>
          </div>
        </div>
        <div class="key-population-box">
          <div class="key-population-box-left">
            <div class="key-population-box-left-special">
              <Sciecle :overtime="specialTotal" :maxNum="keyPersonData.total" :bgColor="'#F5D3C0'"></Sciecle>
              <p>特殊人群</p>
            </div>
            <div class="key-population-box-left-carefor">
              <Semicircle
                :dbcs="careForData"
                :color="'#E25656'"
                :bgColor="'rgba(226, 86, 86, 0.3)'"
                :maxNum="keyPersonData.total"
              ></Semicircle>
              <div>
                <p>关爱人员</p>
                <p>{{ careForData }}</p>
              </div>
            </div>
          </div>
          <div class="key-population-box-right">
            <div class="key-population-box-right-young">
              <div class="key-population-box-right-young-chart">
                <Annular
                  :handlingData="youngData"
                  :textFlag="false"
                  :textColor="'#37C2BB'"
                  :textTop="'42%'"
                  :color="'#37C2BB'"
                  :bgcolor="'#A9E4E1'"
                  :maxNum="keyPersonData.total"
                  :radius="['65%', '80%']"
                ></Annular>
              </div>
              <p class="key-population-box-right-young-text">重点青少年</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="组织统计" name="1">
        <div style="margin-top: 44px"></div>
        <div class="organization-population">
          <div class="organization-population-left"></div>
          <div class="organization-population-center">
            <p>非公有制经济组织</p>
          </div>
          <div class="organization-population-right">
            <p>
              <span class="organization-population-right-num">{{ organizationData.total }}</span>
            </p>
          </div>
        </div>
        <div class="organization-total" :style="{ height: organizationData.category.length * 50 + 'px' }">
          <BarHorizontalRank :value="organizationData"></BarHorizontalRank>
        </div>
        <div class="interlayer"></div>
        <div class="sociology-population">
          <div class="sociology-population-left"></div>
          <div class="sociology-population-center">
            <p>社会组织</p>
          </div>
          <div class="sociology-population-right">
            <p>
              <span class="sociology-population-right-num">{{ socialData.total }}</span>
            </p>
          </div>
        </div>
        <div class="sociology-population-chart">
          <PieX
            :value="socialData.list"
            :legendShow="true"
            :length="25"
            :length2="25"
            :legendTop="'0%'"
            :color="['#E7B76F', '#37C2BB', '#3B71DA', '#3CBDD0']"
            :radius="['50%', '70%']"
            roseType="radius"
            :labelShow="true"
            :minShowLabelAngle="0"
            :right="32"
            :top="40"
            :lengthText="false"
          ></PieX>
        </div>
      </van-tab>
      <van-tab title="事件统计" name="2">
        <div style="margin-top: 44px"></div>
        <div class="sociology-population">
          <div class="sociology-population-left"></div>
          <div class="sociology-population-center">
            <p>事件概览</p>
          </div>
        </div>
        <div class="overview-population">
          <Sciecle
            :overtime="overviewData.leijichuzhi"
            :maxNum="maxLeiji"
            :bgColor="'#E9F8FA'"
            :color1="'#3CBDD0'"
            :color2="'#3CBDD0'"
            :titleShow="true"
            pieSize="160"
          ></Sciecle>
        </div>
        <div class="overview-population-static">
          <div class="overview-population-static-item">
            <p class="overview-population-static-item-num1">{{ overviewData.leijishouli }}</p>
            <p>累计受理事项</p>
          </div>
          <div class="overview-population-static-item">
            <p class="overview-population-static-item-num2">{{ overviewData.leijichuzhi }}</p>
            <p>累计处置事项</p>
          </div>
          <div class="overview-population-static-item1">
            <p class="overview-population-static-item1-num1">{{ overviewData.leijihuifang }}</p>
            <p>累计回访事项</p>
          </div>
        </div>
        <div class="interlayer"></div>
        <div class="organization-population">
          <div class="organization-population-left"></div>
          <div class="organization-population-center">
            <p>实时事件统计</p>
          </div>
        </div>
        <div class="actual-population-chart">
          <Funnel :value="actualData.list" :legend="{ show: false }" :formatter="'{b}{c}'"></Funnel>
        </div>
        <div class="overtime-population">
          <img src="@/assets/images/cockpit/urban/homepage_Uom_overtime.png" />
          <p class="overtime-population-text">超时事件</p>
          <p class="overtime-population-num">
            <span class="overtime-population-num-value">{{ actualData.chaoshishijian }}</span>
            件
          </p>
        </div>
        <div class="average-population">
          <img src="@/assets/images/cockpit/urban/homepage_Uom_handle.png" />
          <p class="average-population-text">平均处置时长</p>
          <p class="average-population-num">
            <span class="average-population-num-value">{{ actualData.pingjunshichang }}</span>
            h
          </p>
        </div>
        <div class="interlayer"></div>
        <div class="organization-population">
          <div class="organization-population-left"></div>
          <div class="organization-population-center">
            <p>事件类型TOP5</p>
          </div>
        </div>
        <div class="radar-population-chart">
          <Radar :value="radarData"></Radar>
        </div>
        <div class="interlayer"></div>
        <div class="organization-population">
          <div class="organization-population-left"></div>
          <div class="organization-population-center">
            <p>事件来源概览</p>
          </div>
        </div>
        <div class="origin-population-chart">
          <Piey
            :legendOrient="'horizontal'"
            :value="originData"
            :color="['#E7B76F', '#37C2BB', '#3B71DA', '#3CBDD0', '#E28656', '#E25656', '#37C2BB', '#A9E4E1']"
            :radius="['0%', '50%']"
            roseType="radius"
            legendTop="80%"
            :legendShow="true"
            :formatter="true"
            :top="0"
            :bottom="60"
            :right="16"
          ></Piey>
        </div>
      </van-tab>
      <van-tab title="基层建设统计" name="3">
        <div style="margin-top: 44px"></div>
        <div class="build-top">
          <div class="build-top-left">
            <div class="build-top-left-item1">
              <p class="build-top-left-item1-text">实有场所数</p>
              <p class="build-top-left-item1-num">{{ baseOverviewData.placeNum }}</p>
              <img src="@/assets/images/cockpit/urban/homepage_Uom_place.png" />
            </div>
            <div class="build-top-left-item2">
              <p class="build-top-left-item2-text">实有房屋数</p>
              <p class="build-top-left-item2-num">{{ baseOverviewData.houseNum }}</p>
              <img src="@/assets/images/cockpit/urban/homepage_Uom_house.png" />
            </div>
          </div>

          <div class="build-top-right">
            <p class="build-top-right-text">实有楼栋数</p>
            <p class="build-top-right-num">{{ baseOverviewData.buildNum }}</p>
            <img src="@/assets/images/cockpit/urban/homepage_Uom_buliding.png" />
          </div>
        </div>
        <div class="build-bottom">
          <div class="build-bottom-left">
            <p class="build-bottom-left-text">出租房屋数</p>
            <p class="build-bottom-left-num">{{ baseOverviewData.houseRentNum }}</p>
            <img src="@/assets/images/cockpit/urban/homepage_Uom_lease.png" />
          </div>
          <div class="build-bottom-right">
            <div class="build-bottom-right-item1">
              <p class="build-bottom-right-item1-text">实有网格数</p>
              <p class="build-bottom-right-item1-num">{{ baseOverviewData.gridNum }}</p>
              <img src="@/assets/images/cockpit/urban/homepage_Uom_grid.png" />
            </div>
            <div class="build-bottom-right-item2">
              <p class="build-bottom-right-item2-text">重点网格数</p>
              <p class="build-bottom-right-item2-num">{{ baseOverviewData.gridKeyNum }}</p>
              <img src="@/assets/images/cockpit/urban/homepage_Uom_key.png" />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="网格队伍统计" name="4">
        <div style="margin-top: 44px"></div>
        <div class="network">
          <img src="@/assets/images/cockpit/urban/homepage_Uom_w.png" />
          <p class="network-text">
            <span>综治委</span>
            <span class="network-text-color1">{{ gridOverviewData.zongzhiwei }}</span>
          </p>
        </div>
        <div class="network">
          <img src="@/assets/images/cockpit/urban/homepage_Uom_b.png" />
          <p class="network-text">
            <span>综治办</span>
            <span class="network-text-color2">{{ gridOverviewData.zongzhiban }}</span>
          </p>
        </div>
        <div class="network">
          <img src="@/assets/images/cockpit/urban/homepage_Uom_z.png" />
          <p class="network-text">
            <span>综治中心</span>
            <span class="network-text-color3">{{ gridOverviewData.zongzhizhognxin }}</span>
          </p>
        </div>
        <div class="network">
          <img src="@/assets/images/cockpit/urban/homepage_Uom_c.png" />
          <p class="network-text">
            <span>网格长</span>
            <span class="network-text-color4">{{ gridOverviewData.wanggezhang }}</span>
          </p>
        </div>
        <div class="network">
          <img src="@/assets/images/cockpit/urban/homepage_Uom_y.png" />
          <p class="network-text">
            <span>网格员</span>
            <span class="network-text-color5">{{ gridOverviewData.wanggeyuan }}</span>
          </p>
        </div>
        <div class="network">
          <img src="@/assets/images/cockpit/urban/homepage_Uom_q.png" />
          <p class="network-text">
            <span>其他人员</span>
            <span class="network-text-color6">{{ gridOverviewData.qitarenyuan }}</span>
          </p>
        </div>
      </van-tab>
    </van-tabs>
    <model-evet ref="urbanPage" @alleventSerch="eventSerchClick"></model-evet>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { Semicircle, PieX, Sciecle, Piey, Radar, Funnel, BarHorizontalRank, Annular } from '@/components/Chart'
import ModelEvet from '../../../components/Widget/Cockpit/EventOverview/Model'
import Cockpit from '@/api/cockpit'
export default {
  components: {
    Semicircle,
    Sciecle,
    PieX,
    Piey,
    Radar,
    Funnel,
    ModelEvet,
    BarHorizontalRank,
    Annular
  },
  data() {
    return {
      personData: {},
      boxWidth1: '170px',
      boxWidth2: '170px',
      boxNum1: '',
      boxNum2: '',
      keyPersonData: {
        total: null
      },
      specialdata: '',
      careForData: null,
      youngData: null,
      gridOverviewData: {},
      baseOverviewData: {},
      organizationData: {
        category: [],
        list: []
      },
      socialData: {},
      originData: [],
      radarData: {},
      actualData: [],
      overviewData: {},
      maxLeiji: '',
      specialTotal: null,
      formdata: {
        regionCode: ''
      }
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {
    this.formdata.regionCode = this.user.regionCode
    this.personTotal()
    this.keyPerson()
    this.gridOverview()
    this.baseOverview()
    this.organization()
    this.social()
    this.origin()
    this.radar()
    this.actual()
    this.overview()
  },
  mounted() {},
  methods: {
    // 点击筛选
    handleScreen() {
      this.$refs.urbanPage.popUpshow = true
      this.$refs.urbanPage.eventShow = false
    },
    eventSerchClick(msg) {
      this.formdata.regionCode = msg.communityRegion
      this.personTotal()
      this.keyPerson()
      this.gridOverview()
      this.baseOverview()
      this.organization()
      this.social()
      this.origin()
      this.radar()
      this.actual()
      this.overview()
    },
    personTotal() {
      Cockpit.Urban.personTotal(this.formdata).then(res => {
        this.personData = res.data.data.data
        this.boxWidth1 = (this.personData.localPersonTotal / this.personData.personTotal) * 343 + 'px'
        this.boxWidth2 = 343 - (this.personData.localPersonTotal / this.personData.personTotal) * 343 + 'px'
        this.boxNum1 = ((this.personData.localPersonTotal / this.personData.personTotal) * 100).toFixed(2) + '%'
        this.boxNum2 = (100 - (this.personData.localPersonTotal / this.personData.personTotal) * 100).toFixed(2) + '%'
      })
    },
    keyPerson() {
      Cockpit.Urban.keyPerson(this.formdata).then(res => {
        this.keyPersonData = res.data.data
        this.specialTotal = res.data.data.list[0][0].count
        this.careForData = res.data.data.list[1][0].count
        const list = res.data.data.list
        this.youngData = list[2][0].count
      })
    },
    gridOverview() {
      Cockpit.Urban.gridOverview(this.formdata).then(res => {
        this.gridOverviewData = res.data.data
      })
    },
    baseOverview() {
      Cockpit.Urban.baseOverview(this.formdata).then(res => {
        this.baseOverviewData = res.data.data
      })
    },
    organization() {
      Cockpit.Urban.organization(this.formdata).then(res => {
        this.organizationData = res.data.data
        const arrData = []
        for (let i = 0; i < this.organizationData.list[0].length; i++) {
          arrData.push(this.organizationData.total)
        }
        this.organizationData.list.push(arrData)
      })
    },
    social() {
      Cockpit.Urban.social(this.formdata).then(res => {
        this.socialData = res.data.data
      })
    },
    origin() {
      Cockpit.Urban.origin(this.formdata).then(res => {
        this.originData = res.data.data
      })
    },
    radar() {
      Cockpit.Urban.radar(this.formdata).then(res => {
        this.radarData = res.data.data
      })
    },
    actual() {
      Cockpit.Urban.actual(this.formdata).then(res => {
        this.actualData = res.data.data
      })
    },
    overview() {
      Cockpit.Urban.overview(this.formdata).then(res => {
        this.overviewData = res.data.data
        this.maxLeiji = this.overviewData.countAll
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/list.less';
@import '~@/assets/style/cockpit/urban.less';
</style>
